/* Main Containers */
body, button {
  font-family: VT323;
}

button {
  font-size: xx-large;
}

.outer-container {
  height: 720px;
  width: 1280px;
  background: #eee;
  border: 5px solid gainsboro;
}

.game-window {
  height: 720px;
  width: 1280px;
  float: left;
  position: relative;
  overflow: hidden;
}

/* Game Section --- Right Section */

#actual_game {
  height: 720px;
  width: 1280px;
  background-color: white;
  z-index: 10;
  right: 0px;
  top: 0px;

}

#game_right_section {
  height: 600px;
  width: 320px;
  position: absolute;
  left: 960px;
  top: 0px;
  color: black;
  z-index: 1;
}

#scoreword, #danger, #level {
  text-align: center;
  font-size: 60px;
}

#score_num, #danger_num, #level_num {
  text-align: center;
  font-size: 40px;
  color: darkblue;
}

#player {
  position: absolute;
  width: 62px;
  left: 600px;
  top: 300px;
  z-index: 9;
}

.curAstroid {
  position: absolute;
  height: 42px;
  width: 42px;
  z-index: 9;
  right: 0px;
  top: 0px;
}

.curAstroid img {
  position: relative;
  z-index: 10;
  height: 80px;
  left: -17px;
  top: -15px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Add your styling here */
/* main_menu */
#main_menu, #game_over {
  height: 720px;
  width: 1280px;
  background: url(../src/frontpage_background.jpg) no-repeat 100%;
}

.main_menu_header {
  width: 100%;
  height: 100px;
  background-color: darkslateblue;
  border-bottom: 6px;
  border-bottom: groove;
  font-size: 100px;
  color: white;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  line-height: 100px;
}

.header_title {
  font-size: 80px;
  color: #fff;
}

.header_log {
  width: auto;
  height: 100%;
}

.main_two_buttons {
  width: 300px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  margin: 90px auto;
}

.main_two_buttons button {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin-bottom: 40px;
  color: white;
  background-color: darkslateblue;
  font-size: 40px;
  word-break: keep-all;
  white-space: nowrap;
}

/* setting */
#settings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid gainsboro;
  width: 600px;
  height: 690px;
  background-color: darkslateblue;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 50px;
}
.fs-strong{
  font-weight: bolder;
}
.fs-strong span{
  font-weight: normal;
}
.m-40{
  margin-bottom: 40px;
}

#settings button{
  width: 180px;
  height: 100px;
  padding: 20px;
  margin-bottom: 40px;
  color: white;
  background-color: purple;
  font-size: 40px;
  word-break: keep-all;
  white-space: nowrap;
  border: 2px solid black;
}
#settings button.active{
  border: 3px solid yellow;
}
.close_btn{
  margin-bottom: 40px;
}
.slidecontainer {
  width: 80%; /* Width of the outside container */
}
/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/* tutorial */
#tutorial{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  font-size: 50px;
  background-color: gainsboro;
}
#tutorial div{
  margin-bottom: 20px;
}
#tutorial .title{
  font-size: 75px;
  margin-bottom: 30px;
}
#tutorial img{
  width: 100px;
  height: 100px;
}
#tutorial button{
  width: 200px;
  height: 75px;
}
/* get ready */
#get_ready{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  height: 100%;
  animation: hideMe normal 3s forwards;
}
@keyframes hideMe {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
#get_ready .title{
  font-size: 75px;
  margin-bottom: 20px;
}
#get_ready img{
  margin-bottom: 20px;
}
/* game over */
.game_over_content {
  height: 617px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center_box {
  margin: auto;
  height: 220px;
  width: 400px;
  background-color: darkslateblue;
  text-align: center;
  color: white;
  font-size: 22px;
}

/* rocket style */
#rocket {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../src/player/player.gif) 100% 100% no-repeat;
  background-size: 80px 80px;
}

#rocket_wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

/* portal style */
.portSection, .shieldSection {
  position: relative;
}

#portal img, #shield img {
  position: absolute;
  height: 80px !important;
}